<p-accordion [multiple]="true">
    <p-accordionTab header="{{'authentication' | translate}}" [selected]="true">
        <div>
            <div class="p-grid">
                <div class="p-col-6 local-accordion-text-key">
                    {{'user_name' | translate}}:
                </div>
                <div class="p-col-6 local-accordion-text-value">
                    <input class="input-style" placeholder="********" pInputText maxlength="24"
                           [(ngModel)]="this.authenticationInformation.userName">
                </div>
            </div>
            <div class="p-grid">
                <div class="p-col-6 local-accordion-text-key">
                    {{'password' | translate}}:
                </div>
                <div class="p-col-6 local-accordion-text-value">
                    <input class="input-style" placeholder="********" pInputText maxlength="24"
                           [(ngModel)]="this.authenticationInformation.passWord">
                </div>
            </div>
            <!--Require two-step authentication-->
            <div class="p-grid">
                <div class="p-col-6 local-accordion-text-key">
                </div>
                <div class="p-col-6 local-accordion-text-value">
<!--                    <p-checkbox [(ngModel)]="checked" [binary]="true"></p-checkbox>-->
                    <input type="checkbox" [(ngModel)]="checked">
                    <label>{{'require_two_step_authentication'|translate}}</label>
                </div>
            </div>
            <div *ngIf="checked">
                <!--Second Authentication Method-->
                <div class="p-grid">
                    <div class="p-col-6 local-accordion-text-key">
                        {{'second_authentication_method' | translate}}:
                    </div>
                    <div class="p-col-6 local-accordion-text-value">
                        <p-dropdown [style]="{'width':'200px'}" [options]="authenticationWay"
                                    [(ngModel)]="twoStepAuthentication.authenticationMethod"
                                    (ngModelChange)="authenticationWaySwitch()"
                                    optionLabel="type"></p-dropdown>
                    </div>
                </div>
                <!--SMS Notification-->
                <div class="p-grid" *ngIf="informationType">
                    <div class="p-col-6 local-accordion-text-key">
                        {{'sms_notification' | translate}}:
                    </div>
                    <div class="p-col-6 local-accordion-text-value">
                        <p-dropdown [style]="{'width':'200px'}" [options]="SMSNotification"
                                    [(ngModel)]="twoStepAuthentication.notification" optionLabel="type"></p-dropdown>
                    </div>
                </div>
                <!--                                    Email Account-->
                <div class="p-grid" *ngIf="informationType">
                    <div class="p-col-6 local-accordion-text-key">
                        {{'contact_Information' | translate}}:
                    </div>
                    <div class="p-col-6 local-accordion-text-value">
                        <input class="input-style" placeholder="{{'phone_number'| translate}}"
                               [(ngModel)]="twoStepAuthentication.contactInformation" pInputText maxlength="24">
                    </div>
                </div>
                <!--Phone Number -->
                <div class="p-grid" *ngIf="informationType===false">
                    <div class="p-col-6 local-accordion-text-key">
                        {{'contact_Information' | translate}}:
                    </div>
                    <div class="p-col-6 local-accordion-text-value">
                        <input class="input-style" placeholder="{{'email_account'| translate}}"
                               [(ngModel)]="twoStepAuthentication.contactInformation" pInputText maxlength="24">
                    </div>
                </div>
            </div>


        </div>
        <div class="p-grid local-accordion-body">
            <div class="p-col-9">
            </div>
            <div class="p-col-3 p-grid">
                <div class="p-col-6 header-button-local">
                    <div>
                        <button class="button-type header-button-right" pButton (click)="applyChange(twoStepAuthentication)"
                                label="{{'apply_change' | translate}}"></button>
                    </div>
                </div>
                <div class="p-col-6 header-button-local">
                    <div>
                        <button class="button-type header-button-right" disabled pButton
                                label="{{'restore_default' | translate}}"></button>
                    </div>
                </div>
            </div>
        </div>
    </p-accordionTab>
</p-accordion>

<!--Apply Change dialog-->
<p-dialog header="{{'Configuration Change Confirmation'| translate}}" [(visible)]="display" styleClass="p-fluid"
          [modal]="true">
    {{'Are sure you want to make changes to the Configuration'| translate}}?
    <br>
    {{'The changes will be only effective after the device been rebooted'| translate}}!
    <div class="p-grid local-accordion-body">
        <div class="p-col-4">
            <button class="button-type header-button-right" pButton
                    label="{{'cancel' | translate}}" (click)="cancel()"></button>
        </div>
        <div class="p-col-4">
            <button class="button-type header-button-right" pButton
                    label="{{'apply' | translate}}" (click)="apply()"></button>
        </div>
        <div class="p-col-4">
            <button class="button-type header-button-right" pButton
                    label="{{'apply & reboot' | translate}}"></button>
        </div>
    </div>
</p-dialog>
